<template>
  <div class="main-div">
    <Row>
      <Col span="24"/>
      <Card>
        <div slot="title">
          <iframe
            id="iframe"
            width="100%"
            style="min-height: 800px"
            height="100%"

            frameborder="0"
            align="center"
            allowfullscreen="true"
            allow="autoplay"
            :src="src"
          />
        </div>
      </Card>


    </Row>
    <Row>
    </Row>
  </div>

</template>

<script>
  import {getStartFlowUrl} from '@/api/analy'
  import {opinionTask} from '@/api/action'

  export default {
    name: 'Task',
    components: {
    },

    data() {

      return {
        baseURL: process.env.VUE_APP_BASE_BPM_API,
        flowImage:
          {
            show: false,
            src: '',
            base: process.env.VUE_APP_BASE_BPM_API + '/view/tab.html?fireHoverAction=true&table=true' + '&instId='
          },
        jsonData: {},
        editData: {},
        remoteFuncs: {},
        dynamicData: {},
        id: '',
        src:'',
        url:'',
        isSpinShow: true,
        opinion:
          {
            show: false,
            loading: true,
            tableColumns: [
              {
                title: '任务名称',
                key: 'nodeName'
              },
              {
                title: '创建时间',
                key: 'createTime'
              },
              {
                title: '审批时间',
                key: 'completeTime'
              },
              {
                title: '执行人',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  if (node.a1FlowTaskTrajectoryEntity) {
                    html = node.a1FlowTaskTrajectoryEntity.userName
                  } else {
                    html = node.auditor
                  }
                  if (!html) {
                    if (node.identityLinks) {
                      html = node.identityLinks
                    }

                  }
                  return h('span', html)
                }
              },
              {
                title: '任务标题',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.title
                  return h('span', html)
                }
              },
              {
                title: '备注/意见',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.opinion
                  return h('span', html)
                }
              },
              {
                title: '状态说明',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.statusVal
                  return h('span', html)
                }
              }

            ],
            tableData: []
          }
      }
    },
    mount() {
      this.getData()
    },
    created() {
      var query = this.$route.query
      if (query.id) {
        this.id = query.id
        this.getStartUrl();
      }

    },
    props: {
      pid: {
        type: String,
        default: ""
      }
    },
    watch: {},
    methods: {
      getStartUrl: function () {
        getStartFlowUrl(this.id).then((response) => {
          if (response.code==0) {
          this.url=response.data;
          var tmp=this.baseURL+response.data
          this.src=tmp
          }
        })
      },
      action: function (action) {
        if (typeof action === 'object') {
          this.alias = action.alias
        } else {
          this.alias = action
        }

        switch (this.alias) {
          case 'approvalHistory':
            this.opinionAction()
            break
          case 'flowImage':
            this.flowImageAction()
            break
          case 'print':

            window.print()
            break
          default:
        }
      },
      flowImageAction: function () {
        this.flowImage.src = this.flowImage.base + this.processInstanceId + '&t=' + new Date().getTime()
        this.flowImage.show = true
      },
      opinionAction: function () {
        this.opinion.show = true
        opinionTask(this.processInstanceId).then((response) => {
          if (response.code == 0) {
            this.opinion.loading = false
            this.opinion.tableData = response.data
          }
        })
      },
      details: function (e) {
        // "taskId":data.id
        this.$router.push({name: 'handleHisTaskDetails', query: {t: new Date().getTime()}})
      }

    }

  }

</script>
<style lang="scss" scoped>
  .task-card {
    margin-top: 10px;
  }

  .container {
    height: auto !important;
    min-height: 450px;
  }

</style>
